
<!-- 订单进度 -->
<template>
    <div class="travel-order-progress" :style="{ 'height': (fullHeight - 117) + 'px' }">
        <div ref="dgtools" class="filter-container" style="padding: 5px;">
            <!-- 车辆当前位置 -->
            <el-form style="display: flex;width: 100%;height: 35px;justify-content: flex-start;align-items: center;"
                :model="dg.now" :inline="true">
                <span style="font-weight: 700;">车辆当前位置：</span>
                <el-form-item>
                    <el-select v-model="dg.now.plateNum" clearable collapse-tags :placeholder="'车牌号'" style="width: 180px">
                        <el-option v-for="it in plateNumArr" :label="it" :key="it" :value="it">
                        </el-option>
                    </el-select>

                </el-form-item>

                <el-button type="primary" icon="el-icon-search" @click.native="getDgList(1)">搜索</el-button>
                <div style="display: flex;margin-left: 15px;height: 35px;justify-content: flex-start;align-items: center;">
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;"
                            src="https://img0.baidu.com/it/u=1063578595,2842121212&fm=253&fmt=auto&app=138&f=JPEG?w=740&h=400"
                            alt="" srcset=""><b class="c-blue">：{{ onCurrentRouteCars }} 辆</b>
                    </div>
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;" src="https://t8.baidu.com/it/u=95513423,888278254&fm=193" alt=""
                            srcset=""><b class="c-blue">：{{ allDayNoOrderCars }} 辆</b>
                    </div>
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;"
                            src="https://img1.baidu.com/it/u=979548916,3828174446&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400"
                            alt="" srcset=""><b class="c-blue">：{{ haveOrderButNotCurrentCars }} 辆</b>
                    </div>


                </div>
                <div style="flex-direction: column;display: flex; margin-left: 300px;height: 35px;align-items: start;">
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;"
                            src="https://img0.baidu.com/it/u=1063578595,2842121212&fm=253&fmt=auto&app=138&f=JPEG?w=740&h=400"
                            alt="" srcset=""><b class="c-blue">：在行程上的车辆</b>
                    </div>
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;" src="https://t8.baidu.com/it/u=95513423,888278254&fm=193" alt=""
                            srcset=""><b class="c-blue">：今天无订单的车辆</b>
                    </div>
                    <div style="margin-left: 15px;">
                        <img style="width: 35px;"
                            src="https://img1.baidu.com/it/u=979548916,3828174446&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400"
                            alt="" srcset=""><b class="c-blue">：今天有订单，但是当前不在行程上的车辆</b>
                    </div>


                </div>


            </el-form>
            <!-- 车辆轨迹 -->
            <el-form style="display: flex;width: 100%;height: 35px;justify-content: flex-start;align-items: center;"
                :model="dg.se" :inline="true">
                <!-- @keyup.enter.native="getDgList(1)" -->
                <span style="font-weight: 700;">车辆轨迹：</span>
                <el-form-item>
                    <el-input style="width: 210px" placeholder="驾驶员姓名/电话（关键字查询）" v-model="dg.se.driverInfo">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-select v-model="dg.se.plateNum" clearable collapse-tags :placeholder="'车牌号'" style="width: 180px">
                        <el-option v-for="it in plateNumArr" :label="it" :key="it" :value="it">
                        </el-option>
                    </el-select>

                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="dg.se.stime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间" clearable style="width: 160px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-date-picker default-time="['23:59:59']" v-model="dg.se.etime" type="datetime"
                        format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间" clearable
                        style="width: 160px;">
                    </el-date-picker>
                </el-form-item>
                <el-button type="primary" icon="el-icon-search" @click.native="getDgList(2)">搜索</el-button>

                <!-- <span class="tools-tj-data">
                        <label style="color: red;">
                             有订单车辆为蓝色：
                        </label><b class="c-blue">{{ haveOrderCars1 }} 辆</b>
                        <el-divider direction="vertical"></el-divider>
                        <label style="color: red;">无订单车辆为黄色：</label><b class="c-blue">{{ noOrderCars1 }} 辆</b>
                        <el-divider direction="vertical"></el-divider>
    
                    </span> -->
                <!-- <el-button type="warning" @click="getDgList(1)">刷新</el-button> -->
                <!-- <el-button type="primary" icon="el-icon-search" @click.native="clear_btn()">清楚</el-button> -->
            </el-form>
            <!-- 未完团订单 -->
            <el-form :model="dg.ps" :inline="true">
                <span style="font-weight: 700;">未完团订单：</span>
                <el-form-item>
                    <el-select v-model="dg.ps.plateNum" clearable collapse-tags :placeholder="'车牌号'" style="width: 180px">
                        <el-option v-for="it in plateNumArr" :label="it" :key="it" :value="it">
                        </el-option>
                    </el-select>

                </el-form-item>

                <el-button type="primary" icon="el-icon-search"
                    @click.native="getNoCompleteOrder(dg.ps.plateNum ? '1' : '2')">搜索</el-button>


            </el-form>

        </div>

        <div class="order-map-content" :style="{ 'height': (mapHeight) + 'px' }">
            <div class="order-list-ocstate" :style="{ 'display': 'block', 'left': left_off ? '300px' : '0px' }"
                :title="left_off ? '隐藏列表' : '显示列表'" @click="left_off = !left_off">
                <i :class="left_off ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
            </div>
            <div v-if="left_off" class="order-list-left" :style="{ 'width': alOcstate ? '300px' : '0px' }">
                <div class="order-list-container">
                    <div class="order-list-main box" :infinite-scroll-immediate="true">
                        <ul>
                            <li v-if="left_list.length == 0"><el-empty description="没有任何数据！"></el-empty></li>

                            <li v-for="(it, index) in left_list" :key="index" @click="selAreaItem(it)">
                                <!-- el-icon-place -->
                                <!-- <i @click="getDgList(1)" class="el-icon-refresh seled-icon"></i> -->
                                <div class="title">
                                    <b>{{ index + 1 }}</b>
                                    <span v-if="it.orderStatus == 'START_TAKE_CUS'" style="color: green;">已出发去接客户</span>
                                    <span v-else-if="it.orderStatus == 'AL_TRAVEL'" style="color: green;">已出行</span>
                                    <span
                                        v-else-if="it.orderStatus == 'DRIVER_CONFIRMED' || it.orderStatus == 'DRIVER_NOT_CONFIRM'"
                                        style="color: red;">未出行</span>
                                    <!-- <el-button style="height: 30px;" type="warning" @click="getDgList(2)">刷新</el-button> -->
                                </div>
                                <div style="display: flex;"><label style="width: 50%;">姓 名：{{ it.driverName
                                }}</label><label>车牌号：{{ it.plateNum }}</label></div>
                                <div style="display: flex;"
                                    v-if="it.orderStatus == 'START_TAKE_CUS' || it.orderStatus == 'AL_TRAVEL'"><label
                                        style="width: 50%;">剩余距离：{{ it.distance + '公里'
                                        }}</label><label>剩余耗时：{{ it.time + '分钟' }}</label>
                                </div>
                                <div
                                    v-else-if="it.orderStatus == 'DRIVER_CONFIRMED' || it.orderStatus == 'DRIVER_NOT_CONFIRM'">
                                    <div> <label style="width: 50%;">开始时间：{{ it.stime }}

                                        </label></div>
                                    <div> <label>结束时间：{{ it.etime }}</label></div>
                                </div>
                                <div><label>电 话：</label>{{ it.driverPhone }}</div>
                                <div><label>起点地址：</label>{{ it.startAddress }}</div>
                                <div><label>终点地址：</label>{{ it.endAddress }}</div>
                                <div><label>行程详情:</label>{{ it.routeDetail }}</div>
                                <div><label>客户备注：</label>{{ it.cusNote }}</div>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>

            <div id="myMap" :style="{ 'height': (mapHeight) + 'px' }"></div>



        </div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

import * as request from "@/utils/request";
import { Message } from "element-ui";

import * as commonSer from '@/api/services/travel/common.service';
import * as orderSer from '@/api/services/travel/order.service';
import * as services_orderSer from '@/api/services/order.service';


export default {
    data() {
        return {
            markers: [],
            plateNums: [],
            // haveOrderCars: 0,
            // noOrderCars: 0,
            allDayNoOrderCars: 0, //今天无订单的车辆
            haveOrderButNotCurrentCars: 0, //今天有订单，但是当前不在行程上的车辆
            onCurrentRouteCars: 0, // 在行程上的车辆

            left_off: false,// 左侧菜单栏开关
            left_list: [],// 左侧未完团订单列表
            // 车牌号选项
            plateNumArr: [],
            // 浏览器高度
            fullHeight: this.U.fullHeight(),
            // 地图的高度
            mapHeight: 0,
            // 地图对象
            myMap: null,
            orderMapTrackList: [],  // 订单轨迹点列表(二维数组)
            // 选中的订单
            curOrder: null,
            // 区域列表-展开/隐藏状态
            alOcstate: true,
            dg: {
                // 列表数据
                list: [],
                // 查询条件参数对象
                now: {
                    page: 1, rows: 1000,
                    // 驾驶员姓名或电话 （关键字查询）
                    driverInfo: '',
                    // 车牌号
                    plateNum: '',
                    // 轨迹开始时间（精确到分，默认当前时间点）
                    stime: '',
                    // 轨迹结束时间（精确到分，默认当前时间点）
                    etime: '',
                },
                // 未完团
                ps: {
                    page: 1, rows: 1000,
                    // 驾驶员姓名或电话 （关键字查询）
                    driverInfo: '',
                    // 车牌号
                    plateNum: '',
                    // 轨迹开始时间（精确到分，默认当前时间点）
                    stime: '',
                    // 轨迹结束时间（精确到分，默认当前时间点）
                    etime: '',

                },
                // 车辆轨迹
                se: {
                    page: 1, rows: 1000,
                    // 驾驶员姓名或电话 （关键字查询）
                    driverInfo: '',
                    // 车牌号
                    plateNum: '',
                    // 轨迹开始时间（精确到分，默认当前时间点）
                    stime: '',
                    // 轨迹结束时间（精确到分，默认当前时间点）
                    etime: '',
                }

            },


        }
    },
    watch: {

        // left_list: {
        //     deep: true,
        //     immediate: true,
        //     handler(newName, oldName) {
        //         console.log(newName, 'newName')
        //         console.log(oldName, 'oldName')
        //         // if (newName.length = 0) {
        //         //     that.clearAllOrderDriving()
        //         // }
        //     }
        // }
    },
    mounted() {
        const that = this;
        that.getAllPlateNumList()
        // 自适应地图高度
        that.mapHeight = that.fullHeight - 117 - that.$refs.dgtools.clientHeight;
        let timer = null
        that.getDgList()

        setTimeout(() => {
            // that.plateNumArr = that.plateNums


        }, 500);

    },
    created() {
        const that = this, U = that.U, C = that.C;
        // let date = new Date()
        // let y = date.getFullYear()
        // let m = date.getMonth()
        // let d = date.getDate();
        // m = (m > 9) ? m : ("0" + m);
        // d = (d < 10) ? ("0" + d) : d;
        // // 出发时间：默认当前时间点
        // that.dg.se.stime = new Date(y, m, d, 0, 0, 0);
        // that.dg.se.etime = new Date(y, m, d, 23, 59, 59);
        // that.dg.se.stime = U.date2str(new Date(that.dg.se.stime.getTime()));
        // that.dg.se.etime = U.date2str(new Date(that.dg.se.etime.getTime()));
        // 首次加载
        window._AMapSecurityConfig = {
        securityJsCode: C.securityJsCode,
    }

        AMapLoader.load({
            key: C.amapJskey,
            version: '2.0',
            plugins: ['AMap.Driving'],
        }).then((AMap) => {
            // 初始化-地图对象
            that.myMap = new AMap.Map('myMap', { zoom: 10, center: [104.065861, 30.657401] });

            // 初始化-地图数据
            // that.getDgList(1); // （默认加载2次，滚动自动加载一次）
        }).catch(err => { console.log('高德地图加载失败：', err); });





    },
    methods: {
        getAllPlateNumList() {
            let that = this

            services_orderSer.getAllPlateNumList({}).then(res => {
                if (res && res.code == 1) {
                    console.log(res)
                    that.plateNumArr = res.plateNums

                }
            });
        },

        clear_btn() {
            const that = this, map = that.myMap;
            map.remove(that.markers);
            that.markers = []

            console.log(that.markers)
        },
        // 关闭地图弹窗
        off_map() {
            const that = this, map = that.myMap;
            // let lnglatArr = curOrder[0].positions[0].lngLat.split(',');
            // // 坐标
            let lnglat = [104.058559, 30.676884];

            // // 起点地址
            // let saddr = o.startAddress == '' || o.startAddress == null ? "" : o.startAddress;
            // // 目前地址
            // let eaddr = o.endAddress == "" || o.endAddress == null ? "" : o.endAddress;

            // // 车牌
            // let plateNum = o.plateNum == "" || o.plateNum == null ? '' : o.plateNum
            // // 距离
            // let distance = o.distance == "" || o.distance == null ? '' : o.distance
            // // 耗时
            // let time = o.time == "" || o.time == null ? '' : o.time
            // 设置信息框对象（优先设置）<b>'+o.index+'</b>
            let winInfo = null
            let cwin = new AMap.InfoWindow({
                // position: lnglat,
                offset: new AMap.Pixel(0, -40),
                content: '当前地点'
            });

            // 显示信息框
            cwin.setContent(winInfo);
            cwin.open(map, lnglat);

            // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
            // map.panTo(lnglat); // 方法一
            cwin.close()
        },
        // 获取-列表
        getDgList(page) {
            const that = this, U = that.U, ps = U.scopy(that.dg.ps), se = U.scopy(that.dg.se), map = that.myMap;

            that.clearAllOrderDriving()
            if (page == 2) {
                that.dg.ps.plateNum = ''
                that.dg.now.plateNum = ''
                console.log(that.dg.ps.plateNum, 'that.dg.ps.plateNum')

                that.off_map()
                if (se.stime == '' || se.stime == null) {
                    return Message.warning("请选择开始时间！");

                }
                if (se.etime == '' || se.etime == null) {
                    return Message.warning("请选择结束时间！");
                }
                if (se.plateNum == '' || se.plateNum == null) {
                    return Message.warning("请选择车牌号！");
                }
                that.left_off = false
                let ps = {
                    page: 1,
                    rows: 1000,
                    driverInfo: se.driverInfo,
                    plateNum: se.plateNum,
                    stime: se.stime,
                    etime: se.etime,
                }

                services_orderSer.getVehiclesPosition(ps).then(res => {

                    if (res && res.code == 1) {

                        that.clear_btn()

                        that.dg.list = res.data;
                        // that.plateNums = res.plateNums
                        // that.haveOrderCars = res.data[res.data.length - 1].haveOrderCars
                        // that.noOrderCars = res.data[res.data.length - 1].noOrderCars
                        // 显示订单对应的地图点标记
                        if (that.myMap) that.showOrderMarker(that.dg.list, 2);
                    }
                });


            } else if (page == 1) {
                that.dg.ps.plateNum = ''
                that.dg.se.plateNum = ''
                that.dg.se.driverInfo = ''
                that.dg.se.stime = ''
                that.dg.se.etime = ''
                console.log(that.dg.ps.plateNum, 'that.dg.ps.plateNum')
                that.clearAllOrderDriving()
                that.left_off = false,// 左侧菜单栏开关
                    that.left_list = [],// 左侧未完团订单列表
                    that.off_map()
                if (that.orderWayTrack) {
                    map.remove(that.orderWayTrack);
                    that.orderWayTrack.destroy();

                }
                let ps = {
                    page: 1,
                    rows: 1000,
                    driverInfo: '',
                    plateNum: that.dg.now.plateNum,
                    stime: '',
                    etime: '',
                }

                services_orderSer.getVehiclesCurrentPosition(ps).then(res => {
                    if (res && res.code == 1) {
                        if (that.markers.length > 0) {
                            that.clear_btn()
                        }
                        that.dg.list = res.data;
                        that.plateNums = res.plateNums
                        console.log(that.dg.list)
                        // that.haveOrderCars = res.data[res.data.length - 1].haveOrderCars
                        // that.noOrderCars = res.data[res.data.length - 1].noOrderCars
                        that.allDayNoOrderCars = res.allDayNoOrderCars
                        that.haveOrderButNotCurrentCars = res.haveOrderButNotCurrentCars
                        that.onCurrentRouteCars = res.onCurrentRouteCars
                        // 显示订单对应的地图点标记
                        if (that.myMap) that.showOrderMarker(that.dg.list);
                    } else {
                        console.log('------', res.msg)
                        return U.qerror(res.msg);
                      
                    }
                });
            } else {
                // that.dg.ps.plateNum = ''
                // that.dg.se.plateNum = ''
                // that.dg.se.driverInfo = ''
                // that.dg.se.stime = ''
                // that.dg.se.etime = ''
                if (that.orderWayTrack) {
                    map.remove(that.orderWayTrack);
                    that.orderWayTrack.destroy();

                }
                services_orderSer.getVehiclesCurrentPosition(ps).then(res => {
                    if (res && res.code == 1) {
                        if (that.markers.length > 0) {
                            that.clear_btn()
                        }
                        that.dg.list = res.data;
                        that.plateNums = res.plateNums
                        console.log(that.dg.list)
                        // that.haveOrderCars = res.data[res.data.length - 1].haveOrderCars
                        // that.noOrderCars = res.data[res.data.length - 1].noOrderCars

                        that.allDayNoOrderCars = res.allDayNoOrderCars
                        that.haveOrderButNotCurrentCars = res.haveOrderButNotCurrentCars
                        that.onCurrentRouteCars = res.onCurrentRouteCars
                        // 显示订单对应的地图点标记
                        if (that.myMap) that.showOrderMarker(that.dg.list);
                    }
                });
            }

        },

        // 显示订单对应地图标记
        showOrderMarker(list, num) {
            const that = this, baseImgUrl = request.default.defaults.baseImgUrl, map = that.myMap;

            console.log(that.markers, 'markersmarkers')

            console.log(that.markers, 'console.log(that.markers)')
            if (num == 2) {

                let arr = []
                for (let i = 0; i < list.length; i++) {
                    if (list[i].positions.length > 0) {
                        arr.push(list[i])
                    }
                }
                console.log(arr, 'arr')

                // 标记图标
                // let markerIcon = `${baseImgUrl}/kcbFiles/final/yellow-vehicle.svg`;

                let red = new AMap.Icon({
                    size: new AMap.Size(36, 36), // 图标尺寸
                    // image: `${baseImgUrl}/kcbFiles/final/red-vehicle.svg`, // Icon的图像
                    image: 'https://t8.baidu.com/it/u=95513423,888278254&fm=193',
                    imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
                    imageOffset: new AMap.Pixel(0, 0)  // 图像相对展示区域的偏移量，适于雪碧图等
                });
                let blue = new AMap.Icon({
                    size: new AMap.Size(36, 36), // 图标尺寸
                    // image: `${baseImgUrl}/kcbFiles/final/blue-vehicle.svg`, // Icon的图像
                    // image: 'https://img1.baidu.com/it/u=1278309343,2850191207&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=413',
                    image: 'https://img0.baidu.com/it/u=1063578595,2842121212&fm=253&fmt=auto&app=138&f=JPEG?w=740&h=400',
                    imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
                    imageOffset: new AMap.Pixel(0, 0)  // 图像相对展示区域的偏移量，适于雪碧图等
                });

                let yellow = new AMap.Icon({
                    size: new AMap.Size(36, 36), // 图标尺寸
                    // image: `${baseImgUrl}/kcbFiles/final/blue-vehicle.svg`, // Icon的图像
                    // image: 'https://img1.baidu.com/it/u=1278309343,2850191207&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=413',
                    image: 'https://img1.baidu.com/it/u=979548916,3828174446&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400',
                    imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
                    imageOffset: new AMap.Pixel(0, 0)  // 图像相对展示区域的偏移量，适于雪碧图等
                });


                for (let j = 0; j < arr.length; j++) {


                    let marker = new AMap.Marker({
                        icon: arr[j].positions[0].onRoute == -1 ? red : arr[j].positions[0].onRoute == 0 ? yellow : blue,
                        position: [parseFloat(arr[j].positions[0].lng), parseFloat(arr[j].positions[0].lat)]
                    });

                    // 绑定数据
                    marker.plateNum = arr[j].plateNum

                    that.markers.push(marker);


                }
                map.add(that.markers)
                console.log(that.markers, 'markers')
                // 自动适应显示想显示的范围区域
                map.setFitView();
                that.selAreaItem(list, 2)
                console.log('(=1111111111111==)')
            } else {

                let arr = []
                for (let i = 0; i < list.length; i++) {
                    if (list[i].positions.length > 0) {
                        arr.push(list[i])
                    }
                }


                // 标记图标
                // let markerIcon = `${baseImgUrl}/kcbFiles/final/yellow-vehicle.svg`;

                let red = new AMap.Icon({
                    size: new AMap.Size(36, 36), // 图标尺寸
                    // image: `${baseImgUrl}/kcbFiles/final/red-vehicle.svg`, // Icon的图像
                    image: 'https://t8.baidu.com/it/u=95513423,888278254&fm=193',
                    imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
                    imageOffset: new AMap.Pixel(0, 0)  // 图像相对展示区域的偏移量，适于雪碧图等
                });
                let blue = new AMap.Icon({
                    size: new AMap.Size(36, 36), // 图标尺寸
                    // image: `${baseImgUrl}/kcbFiles/final/blue-vehicle.svg`, // Icon的图像
                    // image: 'https://img1.baidu.com/it/u=1278309343,2850191207&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=413',
                    image: 'https://img0.baidu.com/it/u=1063578595,2842121212&fm=253&fmt=auto&app=138&f=JPEG?w=740&h=400',
                    imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
                    imageOffset: new AMap.Pixel(0, 0)  // 图像相对展示区域的偏移量，适于雪碧图等
                });

                let yellow = new AMap.Icon({
                    size: new AMap.Size(36, 36), // 图标尺寸
                    // image: `${baseImgUrl}/kcbFiles/final/blue-vehicle.svg`, // Icon的图像
                    // image: 'https://img1.baidu.com/it/u=1278309343,2850191207&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=413',
                    image: 'https://img1.baidu.com/it/u=979548916,3828174446&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=400',
                    imageSize: new AMap.Size(40, 25), // 根据所设置的大小拉伸或压缩图片
                    imageOffset: new AMap.Pixel(0, 0)  // 图像相对展示区域的偏移量，适于雪碧图等
                });
                // that.openinfowin_data(arr)
                for (let j = 0, marker, s; j < arr.length; j++) {
                    marker = new AMap.Marker({
                        icon: arr[j].positions[0].onRoute == -1 ? red : arr[j].positions[0].onRoute == 0 ? yellow : blue,
                        position: [parseFloat(arr[j].positions[0].lng), parseFloat(arr[j].positions[0].lat)]
                    });

                    // 绑定数据
                    marker.plateNum = arr[j].plateNum
                    // 点击标点事件
                    marker.on('click', (e) => {
                        that.left_off = true
                        that.dg.ps.plateNum = e.target.plateNum

                        that.getNoCompleteOrder()
                    })
                    let timeoutId = null;

                    // 鼠标悬停事件
                    marker.on('mouseover', (e) => {
                        timeoutId = setTimeout(() => {
                            this.getNoComp(arr[j])
                        }, 1000)

                    })
                    marker.on('mouseout', (e) => {
                        clearTimeout(timeoutId)
                    })

                    // 添加信息框
                    // 坐标
                    let lnglatArr = arr[j].positions[0].lngLat.split(',');
                    // 坐标
                    let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];
                    // 车牌
                    let plateNum = arr[j].plateNum == "" || arr[j].plateNum == null ? '' : arr[j].plateNum
                    let distance = arr[j].driverInfo == "" || arr[j].driverInfo == null ? '' : arr[j].driverInfo

                    let winInfo = arr[j].positions[0].onRoute == -1 ? '<div class="cpoint-infowin1">' + plateNum + '-' + distance + '</div>' : arr[j].positions[0].onRoute == 0 ? '<div class="cpoint-infowin3" style="color:black">' + plateNum + '-' + distance + '</div>' : '<div class="cpoint-infowin2" >' + plateNum + '-' + distance + '</div>'

                    marker.setLabel({
                        direction: 'top',
                        offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
                        content: winInfo, //设置文本标注内容
                    });


                    that.markers.push(marker);



                }
                map.add(that.markers)
                console.log(that.markers, 'markers')
                // 自动适应显示想显示的范围区域
                map.setFitView();
                console.log('(===============================)')
            }
        },
        // 开始显示地图信息框时间
        // openinfowin_data(e) {
        //     let that = this, map = that.myMap;
        //     console.log(e, '11111111111')
        //     for (let i = 0; i < e.length; i++) {
        //         // 坐标
        //         let lnglatArr = e[i].positions[0].lngLat.split(',');
        //         // 坐标
        //         let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];
        //         // 车牌
        //         let plateNum = e[i].plateNum == "" || e[i].plateNum == null ? '' : e[i].plateNum
        //         let distance = e[i].driverInfo == "" || e[i].driverInfo == null ? '' : e[i].driverInfo
        //         console.log(plateNum)
        //         // 设置信息框对象（优先设置）<b>'+o.index+'</b>
        //         let winInfo =
        //             '<div class="cpoint-infowin1">' +
        //             '<p class="ci-title1">' + plateNum + '-' + distance + '</p>'
        //         '</div>';
        //         let cwin = new AMap.InfoWindow({
        //             position: lnglat,
        //             offset: new AMap.Pixel(17, -5),
        //             content: '当前地点'
        //         });

        //         // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
        //         map.panTo(lnglat); // 方法一
        //         let timer = null
        //         setTimeout(() => {
        //             // 显示信息框
        //             cwin.setContent(winInfo);
        //             cwin.open(map, lnglat);
        //             clearTimeout(timer)
        //         }, 500);
        //     }

        // // 设置信息框对象（优先设置）<b>'+o.index+'</b>
        // let winInfo =
        //     '<div class="cpoint-infowin">' +
        //     '<p class="ci-title">' + 111 + '</p>' +
        //     '<p class="ci-addr" >驾驶员：' + 111 + '</p>' +
        //     '<p class="ci-addr" >地址：' + 111 + '</p>' +
        //     '</div>';
        // let cwin = new AMap.InfoWindow({
        //     position: lnglat,
        //     offset: new AMap.Pixel(17, -5),
        //     content: '当前地点'
        // });


        // // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
        // map.panTo(lnglat); // 方法一
        // let timer = null
        // setTimeout(() => {
        //     // 显示信息框
        //     cwin.setContent(winInfo);
        //     cwin.open(map, lnglat);
        //     clearTimeout(timer)
        // }, 500);
        // },

        // 鼠标悬停事件
        getNoComp(e) {
            let that = this, map = that.myMap;
            console.log(e)
            // 坐标
            let lnglatArr = e.positions[0].lngLat.split(',');
            // 坐标
            let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];

            // // 起点地址
            // let saddr = o.startAddress == '' || o.startAddress == null ? "" : o.startAddress;
            // // 目前地址
            // let eaddr = o.endAddress == "" || o.endAddress == null ? "" : o.endAddress;

            // 车牌
            let plateNum = e.plateNum == "" || e.plateNum == null ? '' : e.plateNum
            // 距离
            let distance = e.driverInfo == "" || e.driverInfo == null ? '' : e.driverInfo
            let address = e.positions[0].address == "" || e.positions[0].address == null ? '' : e.positions[0].address
            // 设置信息框对象（优先设置）<b>'+o.index+'</b>
            let winInfo =
                '<div class="cpoint-infowin">' +
                '<p class="ci-title">' + plateNum + '</p>' +
                '<p class="ci-addr" >驾驶员：' + distance + '</p>' +
                '<p class="ci-addr" >地址：' + address + '</p>' +
                '</div>';
            let cwin = new AMap.InfoWindow({
                position: lnglat,
                offset: new AMap.Pixel(17, -5),
                content: '当前地点'
            });


            // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
            map.panTo(lnglat); // 方法一
            let timer = null
            setTimeout(() => {
                // 显示信息框
                cwin.setContent(winInfo);
                cwin.open(map, lnglat);
                clearTimeout(timer)
            }, 500);

        },
        // 未完团订单列表
        getNoCompleteOrder(num) {

            const that = this, dg = that.dg.ps, map = that.myMap;
            that.dg.se.stime = ''
            that.dg.se.etime = ''
            that.dg.se.plateNum = ''
            that.dg.se.driverInfo = ''
            that.dg.now.plateNum = ''
            that.clearAllOrderDriving()
            if (that.orderWayTrack) {
                map.remove(that.orderWayTrack);
                that.orderWayTrack.destroy();

            }

            if (num == 2) {
                that.getDgList(1)
            } else {
                console.log(dg.plateNum, 123214)
                that.left_off = true
                let ps = {
                    plateNum: dg.plateNum,
                    // stime: dg.stime,
                    // etime: dg.etime,

                }
                // getDgList()
                services_orderSer.getNoCompleteOrder(ps).then(res => {
                    if (res && res.code == 1) {

                        that.left_list = res.data;
                        console.log(that.left_list, 'that.left_list')

                    } else {
                        that.left_list = []
                        // 清空订单轨迹点列表
                        that.orderMapTrackList = [];
                        that.showOrderTrackPoline();
                    }
                });
                that.clearAllOrderDriving()
                that.selAreaItem(that.left_list[0])
            }
        },

        // 设置-地图中心点
        setMapCenterMarker(o, num) {
            let that = this, map = that.myMap;
            console.log(o, '------------')
            if (num == 2) {

                // 坐标
                let lnglatArr = o[0].positions[0].lngLat.split(',');
                // 坐标
                let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];

                // // 起点地址
                // let saddr = o.startAddress == '' || o.startAddress == null ? "" : o.startAddress;
                // // 目前地址
                // let eaddr = o.endAddress == "" || o.endAddress == null ? "" : o.endAddress;

                // 车牌
                let plateNum = o[0].plateNum == "" || o[0].plateNum == null ? '' : o[0].plateNum
                // 驾驶员
                let driverInfo = o[0].driverInfo == "" || o[0].driverInfo == null ? '' : o[0].driverInfo
                // 开始
                let saddress = o[0].positions[0].address == "" || o[0].positions[0].address == null ? '' : o[0].positions[0].address

                // 结束
                let eaddress = o[0].positions[o[0].positions.length - 1].address == "" || o[0].positions[o[0].positions.length - 1].address == null ? '' : o[0].positions[o[0].positions.length - 1].address
                // 设置信息框对象（优先设置）<b>'+o.index+'</b>
                let winInfo =
                    '<div class="cpoint-infowin">' +
                    '<p class="ci-title">' + plateNum + '</p>' +
                    '<p class="ci-addr" >驾驶员：' + driverInfo + '公里' + '</p>' +
                    '<p class="ci-addr">开始地址：' + saddress + '</p>' +
                    '<p class="ci-addr">结束地址：' + eaddress + '</p>' +
                    '</div>';
                let cwin = new AMap.InfoWindow({
                    position: lnglat,
                    offset: new AMap.Pixel(17, -5),
                    content: '当前地点'
                });

                // 显示信息框
                cwin.setContent(winInfo);
                cwin.open(map, lnglat);

                // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
                map.panTo(lnglat); // 方法一

            } else {


                if (o.orderStatus == 'START_TAKE_CUS' || o.orderStatus == 'AL_TRAVEL') {
                    // 坐标
                    let lnglatArr = o.currPoint.split(',');
                    // 坐标
                    let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];

                    // // 起点地址
                    // let saddr = o.startAddress == '' || o.startAddress == null ? "" : o.startAddress;
                    // // 目前地址
                    // let eaddr = o.endAddress == "" || o.endAddress == null ? "" : o.endAddress;

                    // 车牌
                    let plateNum = o.plateNum == "" || o.plateNum == null ? '' : o.plateNum
                    // 距离
                    let distance = o.distance == "" || o.distance == null ? '' : o.distance
                    // 耗时
                    let time = o.time == "" || o.time == null ? '' : o.time
                    // 设置信息框对象（优先设置）<b>'+o.index+'</b>
                    let winInfo =
                        '<div class="cpoint-infowin">' +
                        '<p class="ci-title">' + plateNum + '</p>' +
                        '<p class="ci-addr" >距离：' + distance + '公里' + '</p>' +
                        '<p class="ci-addr">耗时：' + time + '分钟' + '</p>' +
                        '</div>';
                    let cwin = new AMap.InfoWindow({
                        position: lnglat,
                        // offset: new AMap.Pixel(13, 0),
                        offset: new AMap.Pixel(0, -40),
                        content: '当前地点'
                    });

                    // 显示信息框
                    cwin.setContent(winInfo);
                    cwin.open(map, lnglat);

                    // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
                    map.panTo(lnglat); // 方法一


                } else {
                    // 坐标
                    let lnglatArr = o.spoint.split(',');
                    // 坐标
                    let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];

                    // // 起点地址
                    // let saddr = o.startAddress == '' || o.startAddress == null ? "" : o.startAddress;
                    // // 目前地址
                    // let eaddr = o.endAddress == "" || o.endAddress == null ? "" : o.endAddress;

                    // 车牌
                    let plateNum = o.plateNum == "" || o.plateNum == null ? '' : o.plateNum
                    // 距离
                    let distance = o.distance == "" || o.distance == null ? '' : o.distance
                    // 耗时
                    let time = o.time == "" || o.time == null ? '' : o.time
                    // 设置信息框对象（优先设置）<b>'+o.index+'</b>
                    let winInfo = null
                    let cwin = new AMap.InfoWindow({
                        position: lnglat,
                        offset: new AMap.Pixel(0, -40),
                        content: '当前地点'
                    });

                    // 显示信息框
                    cwin.setContent(winInfo);
                    cwin.open(map, lnglat);

                    // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
                    map.panTo(lnglat); // 方法一
                    cwin.close()
                }
            }

        },
        // 显示-区域返回
        selAreaItem(o, num) {

            const that = this, U = that.U, map = that.myMap;
            if (num == 2) {
                console.log(o, 'num==2')
                if (o) {
                    if (o[0].positions.length < 1) {
                        return Message.warning("暂无车辆轨迹信息！");
                    }
                    that.curOrder = o;// 选中的订单
                    // 选中当前区域，并显示标记及信息框

                    that.setMapCenterMarker(o, 2);


                    // 订单轨迹点列表
                    let plist = o[0].positions;
                    // 清空订单轨迹点列表
                    console.log(plist, 'plist')
                    that.orderMapTrackList = [];
                    plist.forEach(it => {
                        // 坐标


                        that.orderMapTrackList.push([it.lng, it.lat]);

                    });
                    that.showOrderTrackPoline(2);
                }
            } else {
                that.getDgList()
                console.log(o, '0')
                if (o) {
                    if (o.spoint == '' || o.spoint == null) {
                        return Message.warning("暂无车辆轨迹信息！");
                    }
                    that.curOrder = o;// 选中的订单
                    // 选中当前区域，并显示标记及信息框

                    that.setMapCenterMarker(o);


                    // 订单轨迹点列表
                    // let plist = o.positions;
                    // 清空订单轨迹点列表


                    if (o.orderStatus == 'DRIVER_NOT_CONFIRM' || o.orderStatus == 'DRIVER_CONFIRMED') {
                        that.orderMapTrackList = [[o.slng, o.slat], [o.elng, o.elat]];
                    } else if (o.orderStatus == 'START_TAKE_CUS') {
                        that.orderMapTrackList = [[o.currLng, o.currLat], [o.slng, o.slat]];
                    } else if (o.orderStatus == 'AL_TRAVEL') {
                        that.orderMapTrackList = [[o.currLng, o.currLat], [o.elng, o.elat]];
                    }

                    // plist.forEach(it => {
                    //     // 坐标
                    //     let lnglatArr = it.lonLat.split(',');

                    //     that.orderMapTrackList.push([lnglatArr[0], lnglatArr[1]]);

                    // });
                    that.showOrderTrackPoline();

                }
            }
        },
        // 使用经纬度获取驾车规划数据

        // 地图显示订单轨迹
        showOrderTrackPoline(num) {
            const that = this, baseImgUrl = request.default.defaults.baseImgUrl, map = that.myMap, curOrder = that.curOrder, lineArr = that.orderMapTrackList;
            console.log(curOrder, 'curOrder')
            if (num == 2) {
                // // 坐标
                // let lnglatArr = curOrder[0].positions[0].lngLat.split(',');
                // // 坐标
                // let lnglat = [parseFloat(lnglatArr[0]), parseFloat(lnglatArr[1])];

                // // // 起点地址
                // // let saddr = o.startAddress == '' || o.startAddress == null ? "" : o.startAddress;
                // // // 目前地址
                // // let eaddr = o.endAddress == "" || o.endAddress == null ? "" : o.endAddress;

                // // // 车牌
                // // let plateNum = o.plateNum == "" || o.plateNum == null ? '' : o.plateNum
                // // // 距离
                // // let distance = o.distance == "" || o.distance == null ? '' : o.distance
                // // // 耗时
                // // let time = o.time == "" || o.time == null ? '' : o.time
                // // 设置信息框对象（优先设置）<b>'+o.index+'</b>
                // let winInfo = null
                // let cwin = new AMap.InfoWindow({
                //     position: lnglat,
                //     offset: new AMap.Pixel(0, -40),
                //     content: '当前地点'
                // });

                // // 显示信息框
                // cwin.setContent(winInfo);
                // cwin.open(map, lnglat);

                // // 地图中心点移动到指定点（可以setZoomAndCenter、setFitView方式，均可以达到地图视野在中心的效果，但必须要放到最后）
                // map.panTo(lnglat); // 方法一
                // cwin.close()

                //     let slnglat = [parseFloat(curOrder.dayMps[0].spoint.lngLat.split(',')[0]), parseFloat(curOrder.dayMps[0].spoint.lngLat.split(',')[1])];
                // let elnglat = [parseFloat(curOrder.dayMps[0].epoint.lngLat.split(',')[0]), parseFloat(curOrder.dayMps[0].epoint.lngLat.split(',')[1])];

                // 清除搜索订单驾车行程线路
                if (that.orderDriving) that.orderDriving.clear();
                // 构造路线导航类
                that.orderDriving = new AMap.Driving({ map: map });
                //     // 根据起终点经纬度规划驾车导航路线
                //     if (that.left_list.length > 0) {
                //         that.orderDriving.search(slnglat, elnglat,
                //             function (status, result) {
                //                 // result 即是对应的驾车导航信息
                //                 if (status === 'complete') {
                //                     // console.log('绘制驾车路线完成', result);
                //                 } else {
                //                     console.log('获取驾车数据失败：', result);
                //                 }
                //             }
                //         );
                //     }

                // 清除所选订单途径轨迹
                if (that.orderWayTrack) {
                    map.remove(that.orderWayTrack);
                    that.orderWayTrack.destroy();

                }

                // 订单线的颜色
                // let strokeColor = null
                // if (curOrder.orderStatus == 'START_TAKE_CUS' || curOrder.orderStatus == 'AL_TRAVEL') {
                //     strokeColor = 'green'
                // } else if (curOrder.orderStatus == 'DRIVER_NOT_CONFIRM' || curOrder.orderStatus == 'DRIVER_CONFIRMED') {
                //     strokeColor = 'red'
                // }


                // 订单途径轨迹
                that.orderWayTrack = new AMap.Polyline({
                    map: map,
                    path: lineArr,
                    showDir: true,
                    // 线颜色 黑色
                    strokeColor: 'red',
                    // 线透明度  
                    strokeOpacity: 0.9,
                    // 线宽 
                    strokeWeight: 8,
                    // 线样式
                    strokeStyle: "solid"
                });
            } else {
                // if (that.orderWayTrack) {
                //     map.remove(that.orderWayTrack);
                //     that.orderWayTrack.destroy();

                // }
                let slnglat = null
                let elnglat = null
                if (curOrder.orderStatus == 'DRIVER_NOT_CONFIRM' || curOrder.orderStatus == 'DRIVER_CONFIRMED') {
                    slnglat = [parseFloat(curOrder.spoint.split(',')[0]), parseFloat(curOrder.spoint.split(',')[1])];
                    elnglat = [parseFloat(curOrder.epoint.split(',')[0]), parseFloat(curOrder.epoint.split(',')[1])];
                } else if (curOrder.orderStatus == 'START_TAKE_CUS') {
                    slnglat = [parseFloat(curOrder.currPoint.split(',')[0]), parseFloat(curOrder.currPoint.split(',')[1])];
                    elnglat = [parseFloat(curOrder.spoint.split(',')[0]), parseFloat(curOrder.spoint.split(',')[1])];
                } else if (curOrder.orderStatus == 'AL_TRAVEL') {
                    slnglat = [parseFloat(curOrder.currPoint.split(',')[0]), parseFloat(curOrder.currPoint.split(',')[1])];
                    elnglat = [parseFloat(curOrder.epoint.split(',')[0]), parseFloat(curOrder.epoint.split(',')[1])];
                } else {
                    return
                }


                // 清除搜索订单驾车行程线路
                if (that.orderDriving) that.orderDriving.clear();
                // 构造路线导航类
                that.orderDriving = new AMap.Driving({ map: map });
                // 根据起终点经纬度规划驾车导航路线
                if (that.left_list.length > 0) {
                    that.orderDriving.search(slnglat, elnglat,
                        function (status, result) {
                            // result 即是对应的驾车导航信息
                            if (status === 'complete') {
                                // console.log('绘制驾车路线完成', result);
                            } else {
                                console.log('获取驾车数据失败：', result);
                            }
                        }
                    );
                }

                // 清除所选订单途径轨迹
                if (that.orderWayTrack) {
                    map.remove(that.orderWayTrack);
                    that.orderWayTrack.destroy();

                }

                // 订单线的颜色
                let strokeColor = null
                if (curOrder.orderStatus == 'START_TAKE_CUS' || curOrder.orderStatus == 'AL_TRAVEL') {
                    strokeColor = 'green'
                } else if (curOrder.orderStatus == 'DRIVER_NOT_CONFIRM' || curOrder.orderStatus == 'DRIVER_CONFIRMED') {
                    strokeColor = 'red'
                }


                // 订单途径轨迹
                // that.orderWayTrack = new AMap.Polyline({
                //     map: map,
                //     path: lineArr,
                //     showDir: true,
                //     // 线颜色 黑色
                //     strokeColor: strokeColor,
                //     // 线透明度  
                //     strokeOpacity: 0.9,
                //     // 线宽 
                //     strokeWeight: 8,
                //     // 线样式
                //     strokeStyle: "solid"
                // });
            }

        },

        // 清除所有订单轨迹
        clearAllOrderDriving() {
            const that = this, map = that.myMap;

            if (that.orderDriving) that.orderDriving.clear();

            // console.log('当前轨迹', that.orderWayTrack);
            // 清除所选订单途径轨迹
            if (that.orderWayTrack) {
                map.remove(that.orderWayTrack);
                that.orderWayTrack.destroy();

            }

            // debugger
            // let polist = map.getAllOverlays('polyline');
            // console.log('所有轨迹', polist);
            // polist.forEach(it => {
            //     map.remove(it);
            //     it.destroy();
            // });
        },
    }
}
</script>

<style lang="less" scoped>
.travel-order-progress {
    width: 100%;
    position: relative;

    .tools-tj-data {
        margin-left: 20px;

        label {
            font-size: 13px;
        }

        b {
            font-size: 12px;
        }
    }

    // 展开/隐藏-区域列表
    .order-list-ocstate {
        width: 15px;
        height: 80px;
        line-height: 80px;
        z-index: 9999;
        background: #15a3fa;
        position: absolute;
        top: 50%;
        left: 0px;
        transition: left 500ms linear;
        cursor: pointer;
        text-align: center;
        border-radius: 0px 5px 5px 0px;
        color: #fff;
    }

    .search-box {
        position: absolute;
        z-index: 5;
        width: 60%;
        left: 30%;
        top: 70px;
        height: 30px;

        .map-search-inp {

            ::v-deep .el-input__inner {
                width: 400px;
                font-size: 13px;
                border: 2px solid #30ccc1;
                color: #30ccc1;
                outline: none;
            }
        }

    }

    .order-map-content {
        display: flex;

        // 区域列表项
        .order-list-left {
            transition: width 500ms linear;

            .order-list-container {
                padding-top: 1px;
                padding-left: 5px;
                background: #f3f3f3;
                height: 100%;

                .order-list-tools {
                    .search-inp {
                        display: flex;
                        justify-content: flex-start;

                        input {
                            flex: 1;
                            height: 28px;
                            font-size: 13px;
                            border: 2px solid #30ccc1;
                            color: #30ccc1;
                            font-weight: 600;
                            padding: 0 8px;
                            outline: none;
                            margin-right: 5px;
                            border-radius: 3px;
                        }
                    }
                }

                .order-list-main::-webkit-scrollbar {
                    width: 5px !important;
                }

                .order-list-main {
                    width: 290px;
                    background: #ffffff;
                    height: 100%;
                    margin-top: 5px;
                    padding-top: 5px;
                    border-radius: 3px;
                    overflow-x: hidden;
                    overflow-y: auto;

                    ul {
                        margin: 0;
                        padding: 0;

                        .load-state {
                            padding: 0px;
                            text-align: center;

                            p {
                                margin: 0px;
                            }
                        }

                        li {
                            position: relative;
                            padding: 0;
                            margin: 0;
                            list-style: none;
                            margin: 0 5px;
                            padding: 5px;
                            border-bottom: 1px solid #f3f3f3;
                            font-size: 12px;
                            line-height: 20px;
                            cursor: pointer;
                            padding-top: 20px;

                            .title {
                                position: absolute;
                                top: 0px;
                                left: 0px;

                                b {
                                    display: inline-block;
                                    padding: 0px 5px;
                                    background: #2979ff;
                                    color: #fff;
                                }

                                span {
                                    vertical-align: middle;
                                    font-weight: 600;
                                    padding-left: 5px;
                                    font-size: 13px;
                                    color: #555;
                                }
                            }

                            .seled-icon {
                                position: absolute;
                                top: 2px;
                                right: 5px;
                                color: #2979ff;
                                font-size: 20px;
                                cursor: default;
                            }

                            .ali-btns {
                                position: absolute;
                                bottom: 2px;
                                right: 0px;
                            }
                        }

                        li.seled {
                            background: #f3f3f3;
                        }
                    }
                }
            }
        }



        #myMap {
            flex: 1;
            width: 100%;

            // 触控发生时不进行任何操作
            // touch-action: none;
            ::v-deep .amap-marker-label {
                border: 0;
                background-color: transparent;
                color: #fff;
            }

            ::v-deep .info {
                position: relative;
                margin: 0;
                top: 0;
                right: 0;
                min-width: 0;
                color: #fff;
            }

            ::v-deep .cpoint-infowin1 {
                // padding-top: 15px;
                width: 110px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                background-color: red;
            }

            ::v-deep .cpoint-infowin2 {
                // padding-top: 15px;
                width: 110px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                background-color: blue;
            }

            ::v-deep .cpoint-infowin3 {
                // padding-top: 15px;
                width: 110px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                background-color: yellow;
            }

            ::v-deep .cpoint-infowin {
                max-width: 300px;
                // padding-top: 15px;
                width: 200px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                .ci-title {
                    margin: 0;
                    font-size: 16px;
                    color: #2979ff;
                    text-align: center;
                    font-weight: bold;

                    b {
                        background: #2979ff;
                        color: #fff;
                        font-weight: 600;
                        padding: 0px 5px;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                    }
                }

                .ci-addr {
                    margin: 0;
                    font-size: 13px;
                    color: green;
                }

            }
        }
    }
}
</style>
